import React, {useEffect, useState} from "react";
import YExtendTemplate from "../../YExtendTemplate";
import MyStorage from "../../../lib/Storage";
import {ReactState} from "../../../types/ReactTypes";

const darkModeClassName: string = 'dark-mode' as const;
const lightModeClassName: string = 'light-mode' as const;

export interface ISwitchThemeProps {
    style?: React.CSSProperties;
}

const SwitchTheme = (props: ISwitchThemeProps): React.JSX.Element => {
    const localMode: string | null = MyStorage.get('theme-mode');
    const [isDark, setIsDark]: ReactState<boolean> = useState<boolean>(localMode === 'dark-mode');
    const darkModeQuery: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
    const toggleClassName = (className: string, add: boolean): void => document.body.classList[add ? 'add' : 'remove'](className);

    useEffect((): void => {
        MyStorage.set('theme-mode', isDark ? darkModeClassName : lightModeClassName);
        toggleClassName(darkModeClassName, isDark);
        toggleClassName(lightModeClassName, !isDark);
    }, [isDark]);

    useEffect(() => {
        const handleThemeModeChange = (e: { matches: boolean }): void => setIsDark(e.matches);

        darkModeQuery.addEventListener('change', handleThemeModeChange);

        return () => darkModeQuery.removeEventListener('change', handleThemeModeChange);
    }, []);

    return (
        <div style={props.style ?? {}} onClick={(): void => {
            setIsDark(!isDark);
        }} className={
            isDark ? 'c-g-switch-theme c-g-switch-theme-selected app_cursor_pointer' : 'c-g-switch-theme app_cursor_pointer'
        }>
            <div className={'c-g-switch-theme-content'}>
                <YExtendTemplate show={!isDark}>
                    <span className={'app_position_relative'}>
                    <svg className={'app_position_absolute'} width="12" height="12" viewBox="0 0 12 12" fill="none"
                         xmlns="http://www.w3.org/2000/svg">
                        <g clipPath="url(#clip0_1281_1062)">
                            <path
                                d="M6.25333 12C6.97508 11.9985 7.69155 11.8768 8.37332 11.64C9.16937 11.363 9.89921 10.9237 10.5166 10.3499C11.134 9.77607 11.6255 9.08031 11.96 8.30664C11.9995 8.22695 12.0097 8.13594 11.989 8.04945C11.9683 7.96296 11.9179 7.88647 11.8466 7.83331C11.7715 7.78243 11.6835 7.75359 11.5928 7.75006C11.5021 7.74653 11.4122 7.76843 11.3333 7.81331C11.1372 7.93133 10.9265 8.02322 10.7066 8.08664C9.82001 8.40484 8.84427 8.36489 7.98662 7.97527C7.12897 7.58566 6.45697 6.87707 6.11333 5.99999C5.95222 5.5764 5.87918 5.12442 5.89866 4.67165C5.91815 4.21888 6.02976 3.77484 6.22667 3.36667C6.42516 2.9528 6.70431 2.58275 7.04776 2.27823C7.3912 1.97371 7.792 1.74086 8.22666 1.59334C8.43946 1.50528 8.66411 1.44912 8.89332 1.42668C8.97395 1.40783 9.04706 1.36519 9.10318 1.3043C9.15929 1.24341 9.19583 1.16706 9.20804 1.08516C9.22025 1.00326 9.20758 0.919578 9.17168 0.844962C9.13577 0.770346 9.07828 0.708235 9.00665 0.66668C7.46695 -0.0819076 5.6939 -0.192124 4.07334 0.360015C3.31947 0.612642 2.62391 1.01388 2.0278 1.54C1.43169 2.06612 0.947141 2.70643 0.602803 3.42308C0.258466 4.13972 0.0613365 4.91814 0.0230722 5.71229C-0.015193 6.50645 0.106185 7.30021 0.380028 8.04664C0.850241 9.21819 1.66157 10.2215 2.70883 10.9264C3.75608 11.6313 4.99095 12.0053 6.25333 12ZM10.5866 9.0333C9.95169 9.88691 9.06961 10.5246 8.05999 10.86C6.74197 11.3338 5.29161 11.2783 4.01363 10.7052C2.73565 10.1321 1.72954 9.08599 1.20669 7.78664C0.972476 7.14239 0.869328 6.45783 0.903303 5.77316C0.937277 5.08849 1.10769 4.41751 1.40453 3.7996C1.70138 3.18169 2.11867 2.62931 2.63192 2.17489C3.14517 1.72047 3.74403 1.37315 4.39334 1.15334C5.40907 0.804165 6.50398 0.755554 7.54666 1.01335C6.6337 1.43695 5.89447 2.16205 5.45333 3.06667C5.21472 3.57631 5.08112 4.12877 5.06051 4.69112C5.03989 5.25348 5.13268 5.81424 5.33334 6.33998C5.75174 7.34037 6.51342 8.1586 7.48134 8.64745C8.44925 9.13629 9.55985 9.26366 10.6133 9.00664L10.5866 9.0333Z"
                                fill="white"
                            />
                        </g>
                        <defs>
                            <clipPath id="clip0_1281_1062">
                                <rect width="12" height="12" fill="white" transform="matrix(-1 0 0 1 12 0)"/>
                            </clipPath>
                        </defs>
                    </svg>
                </span>
                </YExtendTemplate>
                <YExtendTemplate show={isDark}>
                    <span className={'app_position_relative'}>
                        <svg className={'app_position_absolute'} width="12" height="12" viewBox="0 0 12 12" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <g clipPath="url(#clip0_1281_1045)">
                                <path
                                    d="M6.00026 3.40577C4.56977 3.40577 3.40628 4.56927 3.40628 5.99976C3.40628 7.43025 4.56977 8.59374 6.00026 8.59374C7.43075 8.59374 8.59424 7.43025 8.59424 5.99976C8.59424 4.56927 7.43025 3.40577 6.00026 3.40577ZM6.00026 7.59375C5.57763 7.59335 5.17242 7.42528 4.87358 7.12644C4.57473 6.82759 4.40667 6.42239 4.40627 5.99976C4.40667 5.57713 4.57473 5.17192 4.87358 4.87307C5.17242 4.57423 5.57763 4.40616 6.00026 4.40577C6.42289 4.40616 6.8281 4.57423 7.12694 4.87307C7.42579 5.17192 7.59385 5.57713 7.59425 5.99976C7.59385 6.42239 7.42579 6.82759 7.12694 7.12644C6.8281 7.42528 6.42289 7.59335 6.00026 7.59375ZM6.50026 9.98723C6.49854 9.8563 6.44492 9.7314 6.35116 9.63999C6.25741 9.54858 6.13119 9.49813 6.00026 9.49973C5.72426 9.49973 5.50026 9.71823 5.50026 9.98723V11.5122C5.50198 11.6432 5.5556 11.768 5.64936 11.8595C5.74311 11.9509 5.86933 12.0013 6.00026 11.9997C6.27626 11.9997 6.50026 11.7812 6.50026 11.5122V9.98723ZM6.50026 0.48729C6.49854 0.356359 6.44492 0.231463 6.35116 0.140052C6.25741 0.0486403 6.13119 -0.00180817 6.00026 -0.000205994C5.72376 -0.000205994 5.50026 0.218792 5.50026 0.48729V2.01278C5.50111 2.07759 5.51472 2.1416 5.5403 2.20115C5.56589 2.2607 5.60296 2.31462 5.64939 2.35985C5.69582 2.40507 5.7507 2.4407 5.8109 2.46471C5.87111 2.48872 5.93545 2.50064 6.00026 2.49978C6.27626 2.49978 6.50026 2.28178 6.50026 2.01228V0.48729ZM2.01278 6.49975C2.28178 6.49975 2.50028 6.27575 2.50028 5.99976C2.50028 5.72326 2.28178 5.49976 2.01278 5.49976H0.487793C0.356861 5.50147 0.231966 5.5551 0.140555 5.64886C0.049143 5.74261 -0.00130521 5.86882 0.000296402 5.99976C0.000296402 6.27575 0.218795 6.49975 0.487793 6.49975H2.01278ZM11.5127 6.49975C11.7817 6.49975 12.0002 6.27575 12.0002 5.99976C12.0002 5.72326 11.7812 5.49976 11.5127 5.49976H9.98724C9.92243 5.50061 9.85842 5.51421 9.79887 5.5398C9.73932 5.56539 9.68539 5.60245 9.64017 5.64888C9.59495 5.69532 9.55931 5.7502 9.5353 5.8104C9.51129 5.8706 9.49938 5.93495 9.50024 5.99976C9.50024 6.27575 9.71824 6.49975 9.98773 6.49975H11.5127ZM2.82728 3.53377C2.87366 3.57908 2.92853 3.6148 2.98873 3.63888C3.04894 3.66295 3.11331 3.67492 3.17814 3.67408C3.24298 3.67325 3.30702 3.65963 3.36658 3.63401C3.42615 3.60839 3.48008 3.57126 3.52527 3.52477C3.57171 3.47954 3.60878 3.4256 3.63436 3.36604C3.65994 3.30648 3.67354 3.24246 3.67438 3.17764C3.67521 3.11282 3.66327 3.04847 3.63923 2.98827C3.61519 2.92807 3.57953 2.87319 3.53427 2.82678L2.45578 1.74778C2.36185 1.65664 2.23558 1.60651 2.10471 1.60838C1.97385 1.61026 1.84907 1.66399 1.75779 1.75778C1.66413 1.8492 1.61058 1.97405 1.60889 2.10492C1.6072 2.23579 1.65752 2.36197 1.74879 2.45578L2.82728 3.53377ZM9.54474 10.2512C9.63854 10.3425 9.76473 10.3928 9.8956 10.3911C10.0265 10.3894 10.1513 10.3359 10.2427 10.2422C10.3364 10.1508 10.3899 10.026 10.3916 9.89509C10.3933 9.76423 10.343 9.63804 10.2517 9.54423L9.17324 8.46574C9.12686 8.42043 9.07199 8.38471 9.01178 8.36063C8.95158 8.33656 8.88721 8.3246 8.82237 8.32543C8.75754 8.32627 8.6935 8.33989 8.63394 8.36551C8.57437 8.39113 8.52044 8.42825 8.47524 8.47474C8.42878 8.51994 8.39167 8.57385 8.36604 8.6334C8.34042 8.69294 8.32677 8.75695 8.32589 8.82177C8.32501 8.88659 8.33691 8.95095 8.3609 9.01117C8.3849 9.07139 8.42052 9.12629 8.46574 9.17274L9.54474 10.2512ZM2.82728 8.46624C2.9211 8.37488 3.04734 8.32446 3.17828 8.32605C3.30923 8.32765 3.4342 8.38112 3.52577 8.47474C3.57221 8.51997 3.60928 8.57391 3.63486 8.63347C3.66044 8.69304 3.67404 8.75706 3.67488 8.82187C3.67571 8.88669 3.66377 8.95104 3.63973 9.01124C3.61569 9.07145 3.58003 9.12632 3.53477 9.17274L2.45578 10.2522C2.36185 10.3434 2.23558 10.3935 2.10471 10.3916C1.97385 10.3898 1.84907 10.336 1.75779 10.2422C1.71135 10.197 1.67428 10.1431 1.6487 10.0835C1.62312 10.0239 1.60952 9.95992 1.60868 9.8951C1.60785 9.83028 1.61979 9.76593 1.64383 9.70573C1.66787 9.64553 1.70353 9.59065 1.74879 9.54423L2.82728 8.46624ZM9.54474 1.74828C9.59119 1.70306 9.64609 1.66744 9.70631 1.64344C9.76653 1.61944 9.83088 1.60755 9.8957 1.60843C9.96052 1.60931 10.0245 1.62296 10.0841 1.64858C10.1436 1.67421 10.1975 1.71132 10.2427 1.75778C10.3364 1.8492 10.3899 1.97405 10.3916 2.10492C10.3933 2.23579 10.343 2.36197 10.2517 2.45578L9.17324 3.53427C9.12686 3.57958 9.07199 3.6153 9.01178 3.63938C8.95158 3.66345 8.88721 3.67542 8.82237 3.67458C8.75754 3.67375 8.6935 3.66013 8.63394 3.63451C8.57437 3.60888 8.52044 3.57176 8.47524 3.52527C8.42878 3.48007 8.39167 3.42616 8.36604 3.36662C8.34042 3.30707 8.32677 3.24306 8.32589 3.17824C8.32501 3.11342 8.33691 3.04907 8.3609 2.98885C8.3849 2.92863 8.42052 2.87372 8.46574 2.82728L9.54474 1.74828Z"
                                    fill="#0688E5"/>
                            </g>
                            <defs>
                                <clipPath id="clip0_1281_1045">
                                    <rect width="12" height="12" fill="white" transform="matrix(1 0 0 -1 0 12)"/>
                                </clipPath>
                            </defs>
                        </svg>
                </span>
                </YExtendTemplate>
            </div>
        </div>
    );
};

export default SwitchTheme;
